<script setup>
import {addFavArticle, getArticelDetail, getRecommendArticle, likes} from "@/apis/article";
import {onMounted} from "vue";
import {ref} from "vue";
import {useRouter} from "vue-router";
// import {useArticleStore} from "@/store/article";
import {ElMessage} from "element-plus";

// const articleStore = useArticleStore()
const router = useRouter()

let recommendArticle = ref([])

const getArticle = async () => {
  await getRecommendArticle().then(res => {
    recommendArticle.value = res.data
    console.log(res)
  })
}
//查看详情
const getDetails = async (articleid) => {
  const res = await getArticelDetail(articleid)
  if (res.code == 200) {
    router.push({path: '/detail',query:{articleid:articleid}})
  } else {
    ElMessage({type: 'warn', message: '你所访问的文章已经被删除'})
  }
}
//点赞
const addLike = async (articleId)=>{
  const res = await likes(articleId)
  console.log(res)
  if(res.code == 200){
    ElMessage({type:'success',message:res.message})
    getArticle()
  }else{
    ElMessage({type:'success',message:res.message})
  }
}
onMounted(() => {
  getArticle()
})
//收藏
const collect = async (articleid)=>{
  const res =await addFavArticle(articleid)
  console.log(res)
  if(res.code == 200){
    ElMessage({type:'success',message:res.message})
  }else{
    ElMessage({type:'error',message:res.message})
  }
}

</script>
<template>
  <div class="article">
    <el-card class="box-card" v-for="item in recommendArticle" :key="item.id">
      <div class="cardmain">
        <div>文章名称:{{ item.title }}</div>
        <div>作者：{{ item.nickname }}</div>
        <div>点赞数量：{{ item.likes }}</div>
        <el-button type="success" @click="addLike(item.id)" v-if="!item.likeStatus">点赞</el-button>
        <el-button type="success" @click="" v-else>取消点赞</el-button>
        <div style="margin: 5px 0;display: flex;flex-direction: row">
          <el-button type="primary" @click="getDetails(item.id)" style="width: 50%">查看详情</el-button>
          <el-button type="success" style="width: 20%" @click="collect(item.id)" v-if="true">收藏</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>


.article {
  margin-left:200px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.box-card {
  width: 25%;
  height: 200px;
  margin: 25px;
}

.cardmain {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
</style>